<script setup lang="ts">
import { ref, type PropType, onUnmounted, computed } from 'vue'
// import { doPutOrderReceiver } from '@/apis/order'
// import type { ApiOrder, OrderInfo } from '@/basePackage/pages/order/types'

const $props = defineProps({
  info: {
    type: Object as PropType<any>,
    required: true,
  },
  showBtn: {
    type: Boolean,
    default: false,
  },
})
const $emit = defineEmits(['updateAddress'])
const address = computed(() => {
  if ($props.info.shopOrders[0].orderReceiver) {
    return $props.info.shopOrders[0].orderReceiver
  }
  if ($props.info.orderReceiver) {
    return $props.info.orderReceiver
  }
  return {
    address: '',
    id: '',
    mobile: '',
    name: '',
    areaCode: [],
  }
})

onUnmounted(() => {
  uni.$off('chooseAddress', updataOrderReceiver)
})

/**
 * 导航修改地址
 */
const handelAddress = () => {
  uni.navigateTo({ url: `/basePackage/pages/addressManage/AddressManage` })
}
uni.$on('chooseAddress', updataOrderReceiver)
/**
 * 修改收货地地址
 */
async function updataOrderReceiver(res: { shopOrderNo: string; name: string; areaCode: string[]; address: string; mobile: string }) {
  const { name, areaCode, address, mobile } = res
  const params = { shopOrderNo: $props.info.shopOrders[0].no, name, areaCode, address, mobile }
  // const { code, msg, data } = await doPutOrderReceiver($props.info.no, params)
  // if (code !== 200) return uni.showToast({ icon: 'none', title: `${msg ? msg : '修改地址失败'}` })
  $emit('updateAddress')
}
</script>

<template>
  <view class="address">
    <view class="address__left">
      <q-icon name="icon-dizhi2" size="20px" />
      <view>
        <view class="address__left--title">收货人:{{ address.name }} </view>
        <view class="address__left--content">
          <text>取货地址:</text>
          <area-show :areacode="address.areaCode" />
          <text>{{ address.address }}</text>
        </view>
      </view>
    </view>
    <view class="address__right">
      <text class="address__right--mobile">{{ address.mobile }}</text>
    </view>
  </view>
</template>
<style lang="scss" scoped>
@include b(address) {
  box-sizing: border-box;
  padding: 20rpx 20rpx;
  @include flex(space-between);
  font-size: 30rpx;
  @include e(left) {
    @include flex(flex-start, flex-start);
    @include m(title) {
    }
    @include m(content) {
      width: 360rpx;
      color: #ccc;
      font-size: 26rpx;
      margin-top: 6rpx;
    }
  }
  @include e(right) {
    height: 115rpx;
    @include m(mobile) {
      color: #ccc;
    }
  }
}
</style>
